﻿/*
* @Author: lungin
* @Date:   2016-10-04 14:24:30
* @Last Modified by:   lungin
* @Last Modified time: 2016-10-25 16:08:57
*/

.w1000 .modwp,.w1100 .modwp{width: 1200px;}
.hide{position: absolute; left: -9999px;}
.btn_insuper,.privilege_wp,.badge,.sec_hd h3,.gift_cont,.btn_wp_gift .btn_get,.btn_wp_gift .btn_get_off,.welfare_cont,.state_wp .order,.sidenav .ico_gift,.gift_cont .mark,.pop_gift,.pop_welfare{background: url(../Images/spr24_supervip.png) no-repeat;}
.sidenav_wp .btn_wp_switch a,.sidenav{background: url(../Images/spr24_sidebar.png) no-repeat;}

.sp_ban{height: 1083px;}
.sp_gift{height: 800px; background: url(../Images/bg_3.jpg) no-repeat center top;}
.sp_welfare{height: 801px; background: url(../Images/bg_4.jpg) no-repeat center top;}
.sp_state{height: 498px; background: url(../Images/bg_5.jpg) no-repeat center top;}
.section .modwp{padding-top: 133px;}
.sp_ban .modwp{padding-top: 110px;}
.vip-footer .modwp{padding-top: 0; margin-top: 102px;}

/*animation*/
.animate_box{display: none;}
.rock1,.rock2,.rock3{position: absolute; left: 50%; top: 0; width: 1920px; margin-left: -960px; background: url(../Images/spr24_rock.png);}
.rock1{height: 906px;}
.rock2{height: 855px; background-position: 0 -906px;}
.rock3{height: 598px; background-position: 0 -1761px;}
.rock4{position: absolute; left: 50%; top: 0; margin-left: -477px; width: 954px; height: 761px; background: url(../Images/spr24_ban2.png) no-repeat;}
.sp_logo_wp{position: absolute; left: 50%; top: 110px; margin-left: -265px; width: 530px; height: 506px;}
.logo_golden,.logo_silver{position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.logo_golden{background: url(../Images/spr24_ban2.png) no-repeat 0 -761px;}
.logo_silver .s{position: absolute; left: 186px; top: 0; width: 155px; height: 195px; background: url(../Images/spr24_ban.png) no-repeat -550px 0;}
.logo_silver .slogan{position: absolute; left: 7px; top: 211px; width: 511px; height: 162px; background: url(../Images/spr24_ban.png) no-repeat 0 0;}
.logo_silver .triangle{position: absolute; left: 0; top: 38px; width: 529px; height: 469px; background: url(../Images/spr24_ban.png) no-repeat 0 -200px;}
/*animation end*/

.ani{display: block;}
.ani .logo_golden{animation: fadein .5s .9s both;}
@keyframes fadein{
	0%{opacity: 0;}
	100%{opacity: 1;}
}
.ani .logo_silver .s{animation: fadein-top .3s linear both;}
@keyframes fadein-top{
	0%{transform: translateY(-100%);}
	90%{transform: translateY(10%);}
	100%{transform: translateY(0);}
}
.ani .logo_silver .slogan{animation: fadein-left linear .3s both;}
@keyframes fadein-left{
	0%{transform: translateY(100%);}
	90%{transform: translateY(-10%);}
	100%{transform: translateY(0);}
}
.ani .logo_silver .triangle{animation: fadein-down .3s both;}
.ani .btn_insuper{display: block; animation: fadein-down .3s 1s both;}
@keyframes fadein-down{
	0%{transform: translateY(50%); opacity: 0;}
	100%{transform: translateY(0); opacity: 1;}
}
.ani .rock4{animation: scalein .2s .6s both;}
@keyframes scalein{
	0%{transform: scale(0);}
	100%{transform: scale(1);}
}
.ani .rock1{animation: scalein2 .5s linear .6s both;}
.ani .rock2{animation: scalein2 .5s linear .7s both;}
.ani .rock3{animation: scalein2 .5s linear .8s both;}
@keyframes scalein2{
	0%{transform: scale(0) rotate(10deg);}
	50%{transform: scale(1.05) rotate(0);}
	100%{transform: scale(1) rotate(0);}
}


.bg_ban,.animate_box{position: absolute; left: 0; top: 0; width: 100%; min-width: 1200px;}
.bg_ban img{display: block; position: relative; left: 50%; margin-left: -960px;}

.svg-filters{position: absolute; visibility: hidden; width: 1px; height: 1px;}
.sp_logo{margin: 0 auto 11px; width: 530px; height: 506px;}
@-webkit-keyframes fade{
	0%{opacity: 1;}
	100%{opacity: 0;}
}
@keyframes fade{
	0%{opacity: 1;}
	100%{opacity: 0;}
}

.btn_wp_in{position: absolute; left: 0; top: 517px; width: 100%;}
a.btn_insuper{display: none; margin: 0 auto; width: 312px; height: 66px; text-align: center; line-height: 60px; color: #4a3b04; font-size: 26px; background-position: 0 -950px;}
a.btn_insuper:hover{color: #4a3b04; background-position: 0 -1025px;}

.privilege_wp{height: 322px; overflow: hidden; background-position: center top;}
.prv_box{float: left; padding-top: 31px; width: 33.33%; text-align: center;}
.prv_box .tit{margin-bottom: 6px; font-size: 34px; color: #ffeecd;}
.prv_box .subtit{font-size: 16px; color: #acacac;}
.badge_wp{margin-top: 36px; color: #e5b957;}
.badge_wp .prv{display: inline-block; width: 108px; vertical-align: top;}
.badge_wp .badge{display: block; margin: 0 auto 11px; width: 86px; height: 86px;}
.badge_crown{background-position: 0 -350px;}
.badge_id{background-position: -100px -350px;}
.badge_nameplate{background-position: -200px -350px;}
.badge_pt{background-position: -300px -350px;}
.badge_kn{background-position: -400px -350px;}
.badge_jsq{background-position: -500px -350px;}
.badge_txt{background-position: -600px -350px;}
.badge_txt span{display: block; height: 100%; line-height: 86px; font-size: 18px;}

.section .sec_hd{margin-bottom: 46px;}
.section .sec_hd h3{margin-bottom: 16px; width: 450px; height: 50px; overflow: hidden; line-height: 50;}
.section .subhd{font-size: 16px; color: #84714d;}
.sp_gift .sec_hd h3{background-position: 0 -450px;}
.sp_welfare .sec_hd h3{background-position: 0 -500px;}
.sp_state .sec_hd h3{background-position: 0 -550px;}

.gift_wp{position: relative; width: 100%; height: 100px;}
.gift_wp .gift_box{float: left; margin-right: 20px; width: 278px;}
.gift_wp .gift_box_last{margin: 0;}
.gift_cont{position: relative; padding: 16px 20px 0; margin-bottom: 20px; height: 307px; background-position: 0 -600px; color: #e6c05b;}
.gift_cont .mark{position: absolute; right: 0; top: 0; padding: 8px 0 0 14px; width: 46px; height: 50px; text-align: center; line-height: 15px; color: #fff; background-position: -600px -475px;}
.gift_cont .condition{margin-bottom: 38px; height: 24px; font-size: 16px; line-height: 24px;}
.gift_cont .condition em{font-size: 20px; font-weight: bold;}
.img_wp_gift{margin: 0 auto 35px; width: 210px; height: 170px;}
.img_wp_gift img{display: block; width: 100%;}
.gift_txt .gift_price{float: left; width: 45%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.gift_txt .gift_name{float: right; width: 55%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; text-align: right;}
.pop_gift,.pop_welfare{display: none; position: absolute; overflow: hidden; left: 0; width: 100%; text-align: left;}
.pop_gift{top: 0; height: 100%; background-position: -600px -600px;}
.pop_gift p,.pop_welfare p{display: table-cell; vertical-align: middle; padding: 0 40px; font-size: 16px; color: #fff; line-height: 30px;}
.btn_wp_gift .btn_get,.btn_wp_gift .btn_get_off{display: block; margin: 0 auto; width: 240px; height: 54px; line-height: 54px; font-size: 20px; color: #0b0905; text-align: center; background-position: -350px -950px;}
.btn_wp_gift .btn_get:hover{color: #0b0905; background-position: -350px -1025px;}
.btn_wp_gift .btn_get_off,.btn_wp_gift .btn_get_off:hover{background-position: -350px -1100px; color: #0b0905; cursor: default;}
.gift_cont:hover .pop_gift,.welfare_cont:hover .pop_welfare{display: table; -webkit-animation: arise .3s ease both; animation: arise .3s ease both;}
@-webkit-keyframes arise{
	0%{transform: scale(.5);}
	100%{transform: scale(1);}
}
@keyframes arise{
	0%{transform: scale(.5);}
	100%{transform: scale(1);}
}

.welfare_cont{position: relative; margin-bottom: 20px; height: 323px; background-position: -300px -600px; text-align: center;}
.welfare_cont .tit_wp{padding-top: 27px; margin-bottom: 54px;}
.welfare_cont .tit{margin-bottom: 3px; color: #fff; font-size: 20px;}
.welfare_cont .subtit{color: #e6c05b; font-size: 12px;}
.img_wp_welfare{margin: 0 auto 35px; width: 220px; height: 160px;}
.img_wp_welfare img{display: block; width: 100%;}
.pop_welfare{bottom: 0; width: 100%; height: 220px; background-position: -900px -600px;}

.state_wp{color: #827a6b; line-height: 18px;}
.state_wp li{position: relative; margin-bottom: 12px; padding-left: 33px;}
.state_wp .order{position: absolute; left: 0; top: 0; width: 18px; height: 18px; text-align: center; line-height: 18px; color: #130b00; background-position: -600px -450px;}
.state_wp li .emphasis,.state_wp li a{color: #c8a55b;}
.state_wp li a:hover{color: #c8a55b; text-decoration: underline;}

.sidenav_wp{position: fixed; z-index: 10; right: 0; top: 19%; width: 120px; text-align: center;}
.sidenav_wp .btn_wp_switch a{position: absolute; width: 120px; height: 80px; left: 0; top: 0; background-position: -150px 0; color: #534124; line-height: 80px;}
.sidenav_wp .btn_wp_switch a:hover{background-position: -150px -100px;}
.sidenav{padding-top: 90px; height: 168px;}
.sidenav a{display: block; height: 38px; line-height: 38px; color: #d7a74c;}
.sidenav a:hover,.sidenav a.on{color: #ffd992;}
.sidenav .ico_gift{display: inline-block; vertical-align: top; position: relative; top: 11px; margin-right: 4px; width: 16px; height: 16px; background-position: -625px -450px;}

.mouse-container { position: fixed; bottom: 2%; left: 50%; margin-left: -11px;}
.mouse { position: relative; width: 20px; height: 30px; margin: 0 auto; border: solid 1px #fff; border-radius: 8px;}
.mouse .scroll-down { display: block; width: 4px; height: 4px; margin: 15% auto auto; -webkit-animation: scroll-inner 1.5s ease infinite; animation: scroll-inner 1.5s ease infinite; border-radius: 50%; background: #fff;}
@-webkit-keyframes scroll-inner{
	from{margin-top:15%;opacity:1}
	to{margin-top:75%;opacity:0}
}
@keyframes scroll-inner{
	from{margin-top:15%;opacity:1}
	to{margin-top:75%;opacity:0}
}

.w900 .bg_ban,.w900 .animate_box{min-width: 900px;}
.w900 .privilege_wp{height: 242px;}
.w900 .prv_box .tit{font-size: 26px;}
.w900 .prv_box .subtit{font-size: 12px;}
.w900 .prv_box{padding-top: 23px;}
.w900 .badge_wp{margin-top: 27px;}
.w900 .badge_wp .badge{zoom: .75; position: relative; left: 8px\0;}
.w900 .badge_wp .prv{width: 81px; font-size: 12px;}

.w900 .gift_wp .gift_box{zoom: .75; margin-right: 22px\0;}
.w900 .gift_box_last{position: absolute; right: 0; right: -91px\0; top: 0;}

